<template>
  <div class="add-container">
    <!-- 面包屑导航 -->
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>-->
    <bread :second="'商品管理'" :third="'添加商品'"></bread>
    <!-- 卡片 -->
    <el-card class="box-card">
      <div style="margin-top: 15px;">
        <el-alert title="消息提示的文案" type="info" center show-icon></el-alert>
        <!-- 步骤条 -->
        <el-steps :active="Number(activeName)" align-center>
          <el-step title="基本信息"></el-step>
          <el-step title="商品参数"></el-step>
          <el-step title="商品属性"></el-step>
          <el-step title="商品图片"></el-step>
          <el-step title="商品内容"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
        <!-- 标签页 -->
        ==={{activeName}}
        <el-tabs
          v-model="activeName"
          :tab-position="tabPosition"
          :before-leave="beforeLeave"
          style="height: 100%;margin-top:10px"
        >
          <el-tab-pane name="0" label="基本信息">
            <el-form
              ref="formLabelAlignForm"
              :label-position="labelPosition"
              label-width="80px"
              :model="formLabelAlign"
              :rules="rules"
            >
              <el-form-item prop="goods_name" label="商品名称">
                <el-input v-model="formLabelAlign.goods_name"></el-input>
              </el-form-item>
              <el-form-item prop="goods_price" label="商品价格">
                <el-input v-model="formLabelAlign.goods_price"></el-input>
              </el-form-item>
              <el-form-item prop="goods_weight" label="商品重量">
                <el-input v-model="formLabelAlign.goods_weight"></el-input>
              </el-form-item>
              <el-form-item prop="goods_number" label="商品数量">
                <el-input type="number" v-model="formLabelAlign.goods_number"></el-input>
              </el-form-item>
              <el-form-item prop="goods_cat" label="商品分类">
                <el-cascader
                  v-model="formLabelAlign.goods_cat"
                  :options="cateCasList"
                  :props="props"
                  @change="handleChange"
                ></el-cascader>
                ==={{formLabelAlign.goods_cat}}==={{catId}}
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane name="1" label="商品参数">
            <el-tag
              style="margin:5px;"
              v-for="(item, index) in manyList"
              :key="index"
            >{{item.attr_name}}</el-tag>
          </el-tab-pane>
          <el-tab-pane name="2" label="商品属性">
            <el-form
              :label-position="labelPosition"
              label-width="80px"
              :model="formLabelAlign"
              :rules="rules"
            >
              <el-form-item v-for="(item, index) in onlyList" :key="index" :label="item.attr_name">
                <el-input v-model="formLabelAlign.goods_name"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane name="3" label="商品图片">
            <!-- 图片上传  action="http://klxin.cn:8888/api/private/v1/upload" -->
            <el-upload
              class="upload-demo"
              action="http://127.0.0.1:8888/api/private/v1/upload"
              :headers="headersObj"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :on-success="fileSuccess"
              list-type="picture"
            >
              <el-button size="small" type="primary" name="file">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <!-- 图片上传 -->
          </el-tab-pane>
          <el-tab-pane name="4" label="商品内容">
            =={{formLabelAlign.goods_introduce}}
            <quillEditor v-model="formLabelAlign.goods_introduce" style="height:350px"></quillEditor>
            <el-button type="primary" @click="addGoods">添加商品</el-button>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
    <!-- 图片预览 -->
    <el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
      <img :src="previewPath" alt="" class="previewImg">
    </el-dialog>
  </div>
</template>        
<script>
import _ from 'lodash'
import { cateList_api, cateParamsList_api, goodsAdd_api } from '@/api'

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  data() {
    return {
      tabPosition: 'left',
      activeName: '0',
      /* 基本信息 */
      labelPosition: 'top',

      /* 表单数据 */
      formLabelAlign: {
        goods_name: '111',
        goods_cat: [],
        goods_price: '333',
        goods_number: '4444',
        goods_weight: '5555',
        goods_introduce: '6666',
        pics: [],
        attrs: []
      },
      //  级联选择器的数组
      cateCasList: [],
      props: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },

      //第二个页面
      manyList: [],
      onlyList: [],

      /* 表单校验规则 */
      rules: {
        goods_name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        goods_price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        goods_number: [
          { required: true, message: '请输入商品数量', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        goods_weight: [
          { required: true, message: '请输入商品重量', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        goods_cat: [
          { required: true, message: '请输入商品分类', trigger: 'blur' }
        ]
      },

      // 图片上传
      fileList: [],

      /* 定义请求头 */
      headersObj: {
        Authorization: window.sessionStorage.getItem('token')
      },

      previewVisible: false,
      previewPath: ''
    }
  },
  created() {
    this.getParamsCate()
  },
  methods: {
    // 级联选择器的change事件
    handleChange() {
      if (this.formLabelAlign.goods_cat.length !== 3) {
        this.formLabelAlign.goods_cat.length = []
      }
      // this.formLabelAlign.goods_cat = this.formLabelAlign.goods_cat //  [1,2,3]==1,2,3
      // console.log(this.formLabelAlign.goods_cat, 999999)
    },
    //   级联选择器的分类
    async getParamsCate() {
      //获取父级分类
      const { data: res } = await cateList_api({ type: 3 })
      //console.log(res, 5555)
      this.cateCasList = res.data
    },

    async beforeLeave(activeName) {
      console.log(activeName, 888999)
      //  判断标签页的跳转
      if (activeName !== 0) {
        // if (this.formLabelAlign.goods_cat.length !== 3) {
        //   this.$message.error('错了哦，请选择分类数据');
        //   return false
        // }

        //  判断是不是商品参数
        if (activeName == 1) {
          const { data: res } = await cateParamsList_api({
            id: this.catId,
            sel: 'many'
          })
          //console.log(res, 444)
          this.manyList = res.data

          res.data.forEach(item => {
            var manyObj = {
              attr_id: item.attr_id,
              attr_value: item.attr_vals
            }

            this.formLabelAlign.attrs.push(manyObj)
          })
          // console.log(this.formLabelAlign.attrs,66677);
        }

        //  静态属性
        if (activeName == 2) {
          const { data: res } = await cateParamsList_api({
            id: this.catId,
            sel: 'only'
          })
          //console.log(res, 444)
          this.onlyList = res.data

          res.data.forEach(item => {
            var onlyObj = {
              attr_id: item.attr_id,
              attr_value: item.attr_vals
            }

            this.formLabelAlign.attrs.push(onlyObj)
          })

          console.log(this.formLabelAlign.attrs, 66677)
        }
      }
    },

    /* 图片上传 */
    fileSuccess(response) {
      this.formLabelAlign.pics.push({ pic: response.data.tmp_path }) //  [1,2]
      console.log(this.formLabelAlign.pics, 666777)
    },
    //图片移除
    handleRemove(file, fileList) {
      //console.log(file, fileList,555555)  //2
      //判断的条件就是删除的临时路径和数组中的临时路径是不是一样的
      // var index=this.formLabelAlign.pics.findIndex(item=>item.pic==file.response.data.tmp_path)
      // this.formLabelAlign.pics.splice(index,1)
      // console.log(this.formLabelAlign.pics,8888);
      this.formLabelAlign.pics = this.formLabelAlign.pics.filter(
        item => item.pic !== file.response.data.tmp_path
      )
    },
    //图片预览
    handlePreview(file) {
      console.log(file.response.data.tmp_path, 44444)
      this.previewVisible = true
      this.previewPath = 'http://klxin.cn:8888/' + file.response.data.tmp_path
    },

    //添加商品
    addGoods() {
      //
      // console.log(this.formLabelAlign,11);
      // //  将原始数据 深拷贝
      var formD = _.cloneDeep(this.formLabelAlign)
      //console.log(formD,22);
      formD.goods_cat = formD.goods_cat.join(',')
      console.log(formD, 22)
      this.$refs.formLabelAlignForm.validate(async valide => {
        console.log(valide, 88899)
        if (valide) {
          //  发送请求
          const { data: res } = await goodsAdd_api(formD)
          console.log(res, 666666)
        } else {
          return
        }
      })

      // console.log(this.formLabelAlign,11);
      // //  将原始数据 深拷贝
      // var  formD=_.cloneDeep(this.formLabelAlign)
      //  console.log(formD,22);
      // formD.goods_cat.join(',')
    }
  },
  computed: {
    catId() {
      if (this.formLabelAlign.goods_cat.length == 3) {
        return this.formLabelAlign.goods_cat[2]
      } else {
        return 2050
      }
    }
  },

  components: {
    quillEditor
  }
}
</script>
<style scoped lang='less'>
.add-container {
  .el-breadcrumb {
    margin-bottom: 20px;
  }

  .box-card {
    .iptBox {
    }
    //  deep 穿透  穿刺
    /deep/.ql-container {
      height: 200px;
    }
  }
}
</style>